<template>
  <div class='MiniLogin flex'>
    <!-- <div class="min-w-210px h-100vh bg-#eee"></div> -->
    <div class="px-10px box" >
      <!-- <a-button v-for="item in list" :key="item.name" @click="handleClick(item)" style="margin:0 8px 15px;">{{ item.name }}</a-button> -->
      <component :is="comName"></component>
    </div>
  </div>
</template>
<script setup lang='ts'>
import { shallowRef } from "vue"
import XGantt from "./XGantt/index.vue"
import BorrowCalendar from "./BorrowCalendar/index.vue"
import StatisticsTable from "./StatisticsTable/index.vue"
import PrintQRCode from "./PrintQRCode/index.vue"
import BaiduMap from "./Map/index.vue"
const comName = shallowRef(XGantt);
const list = [
  {
    name:"计划排期",
    com:XGantt
  },
  {
    name:"借用日历",
    com:BorrowCalendar
  },
  {
    name:"统计表格",
    com:StatisticsTable
  },
  {
    name:"打印二维码",
    com:PrintQRCode
  },
  {
    name:"地图",
    com:BaiduMap
  }
];
const handleClick = (item) => {
  comName.value = item.com;
}
</script>
<style scoped>
/* @import url(); 引入css类 */
.box{
  width: calc(100vw)
}
</style>